import React from "react";

export default function () {
	const list = [
		{
			name: "品牌安心",
			desc: "阿里巴巴国际站24年品牌保证",
			icon: require("@/assets/imgs/honor.png"),
			img: require("@/assets/imgs/logo.png"),
		},
		{
			name: "科技驱动",
			desc: "以新技术驱动的数字外贸服务平台，简单开店、AI生意功能持续升级",
			icon: require("@/assets/imgs/global1.png"),
			img: require("@/assets/imgs/display4.png"),
		},
		{
			name: "全套数字化出海服务",
			desc: "提供从商机获取、订单管理、物流服务、跨境资金到合规经营等全流程服务 ",
			icon: require("@/assets/imgs/global2.png"),
			img: require("@/assets/imgs/computer.png"),
		},
		{
			name: "安全可靠",
			desc: "高强度数据加密，世界权威机构合作",
			icon: require("@/assets/imgs/security.png"),
			img: require("@/assets/imgs/person.png"),
		},
	];
	return (
		<div className='why'>
			<div className='why-wrapper'>
				<div className='why-title'>
					为什么选择<span>阿里巴巴国际站</span>
				</div>
				<div className='why-list'>
					<ul>
						{list.map((item, index) => {
							return (
								<li key={index}>
									<img className='main-img' src={item.img} alt='' />
									<div className='title'>
										<img src={item.icon} alt='' />
										<span>{item.name}</span>
									</div>
									<div className='desc'>{item.desc}</div>
								</li>
							);
						})}
					</ul>
				</div>
			</div>
		</div>
	);
}
